import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import NoteTags from "./NoteTag";
import { connect } from "react-redux";
import { selectCategory, selectTag } from "../../redux/action";
import IconButton from "@mui/material/IconButton";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import { Link, useNavigate } from "react-router-dom";
import TabPanel from "components/TabPanel";

import { tabstheme } from "themes";
import { ThemeProvider } from "@mui/material/styles";
const NoteTab = (props: any) => {
  let navigate = useNavigate();
  const tagslist = props.tagslist;
  const selectCategory = props.selectCategory;
  const [value, setValue] = useState(0);
  useEffect(() => {
    selectCategory('0')
  },[])
  const TabsWrapper = styled.div`
    flex-grow: 1;
  `;
  const TabPanelWrapper = styled.div`
    flex-grow: 1;
  `;
  const handleChange = (event: any, newValue: any) => {
    setValue(newValue);
    selectCategory(newValue.toString());
  };
  const TabBar = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .edit-link {
      padding-right: 20px;
    }
  `;
  return (
    <TabsWrapper>
      <TabBar>
        <IconButton
          aria-label="add an alarm"
          onClick={() => {
            navigate(-1);
          }}
        >
          <ArrowBackIosIcon />
        </IconButton>
      <ThemeProvider theme={tabstheme}>
        <Tabs value={value} centered onChange={handleChange} >
          <Tab label="支出" key="label-input" />
          <Tab label="收入" key="label-output" />
        </Tabs>
        </ThemeProvider>
   
        <Link to="/note/edit" className="edit-link">
          编辑
        </Link>
 
      </TabBar>

      <TabPanelWrapper>
        {tagslist.map((_tag: any) => {
          const index = parseInt(_tag.category);
          return (
            <TabPanel value={value} index={index}>
              <NoteTags value={{ tagListProp: _tag.tags }} />
            </TabPanel>
          );
        })}
      </TabPanelWrapper>
    </TabsWrapper>
  );
};
const mapStateToProps = (state: any) => {
  return { tagslist: state.tags };
};
export default connect(mapStateToProps, { selectCategory, selectTag })(NoteTab);
